<template>
    <div class="footer">
        <ul>
            <li :class="index===i ? 'active' : '' " v-for="(item,index) in footerArr" :key="index" v-on:click="changed(index)">{{ item }}</li>
        </ul>
    </div>
</template>

<script>
import nav from "../mixins/nav"
    export default {
        name: "Footer",
        data(){
            return{
                footerArr:["关于我们","关于你们","关于他们","联系我们","别联系了"],
            }
        },
        mixins: [nav]
    }
</script>

<style scoped>
   .footer ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        height: 50px;
        background-color: rgb(42, 41, 41);
        line-height: 50px;
        color: gainsboro;
        font-size: 25px;
        margin-top: 20px;
    }
    .footer ul li{
        cursor: pointer;
        list-style: none;
        width: 20%;
        text-align: center;
    }
    .active{
        background-color: gainsboro;
        color: #000;
    }
</style>